<template>
  <div class="rank">
    <div class="rank-list">
      <div class="rank-left">
        <div :class="{ active: active == idx }" v-for="(rank,idx) in ranks" :key="idx" class="rank-item"
             >{{ rank.name }}</div>
      </div>
      <div class="rank-right">
        <el-button round color="#e9ecec" style="font-size: 16px; color: #999;padding: 0 15px;" size="large"
                   @click="showScreen">
          筛选
          &nbsp;<el-icon v-if="!ScreenHandler">
          <ArrowDown />
        </el-icon>
          <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </el-button>
      </div>
    </div>
    <div class="screen" v-show="ScreenHandler">
      <div class="skill" v-for="(ski, $index) in Screen" :key="$index">
        <div class="title">{{ ski.label }}:</div>
        <div class="skill-content">
          <div :class="{ select: s.isSelect }" class="skill-item" v-for="s in ski.choises" :key="s.id"
               @click="addSelect(s)">{{ s.name }}</div>
        </div>
      </div>
      <div v-if="selectArr.length || formatArr.length" class="reset" @click="reset">重置</div>
    </div>
  </div>
</template>

<script lang="ts">

export default {
  name: "Rank",
}
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import useHomeStore from '@/stores/home';
import {cloneDeep} from 'lodash'
const homeStore = useHomeStore()

interface RankModel {
  name: string,
  value: string
}

const ranks = ref([
  {
    name: '综合榜',
    value: 'integrated'
  },
  {
    name: '热练榜',
    value: 'popTraining'
  },
  {
    name: '新锐榜',
    value: 'newcomer'
  },
  {
    name: '最新',
    value: 'lastest'
  },
])

//切换高亮
let active = ref(0)

// const switchover = (rank: RankModel, idx: number) => {
//   homeStore.getProductionSynthesize(rank.value)
//   active.value = idx
// }


const selectArr = ref<any>([])
const formatArr = ref<any>([])
const isSelect = ref(false)

const addSelect = (s: any) => {
  const Item = Screen.value[0].choises.find((item:any) => item.name === s.name)
  if (Item) {
    if (selectArr.value.length === 3 && !s.isSelect) {
      ElMessage.info('同一筛选条件最多选择3个');
      return
    }
    if (s.isSelect) {
      // console.log('删除', hobby.isSelect);
      // 修改当前点击的兴趣标签的选中状态
      // hobby.isSelect = false;
      // 删除当前点击的兴趣标签
      selectArr.value.forEach((item: any, index: number) => {
        if (item.name === s.name) {
          selectArr.value.splice(index, 1);
        }
      })
      const Item = Screen.value[0].choises.find((item:any) => item.name === s.name)
      // console.log(Item)
      // const Item = Screen.value.choises.find((item: { name: string; }) => item.name === s.name);
      if (Item) {
        Item.isSelect = false;
      }
      s.isSelect = false
      return
    }
    // 修改当前点击的兴趣标签的选中状态
    s.isSelect = true;
    selectArr.value.push(s);
  } else {
    if(s.isSelect){
      formatArr.value.forEach((item: any, index: number) => {
        if (item.name === s.name) {
          formatArr.value.splice(index, 1);
        }
      })
      const Item = Screen.value[0].choises.find((item:any) => item.name === s.name)
      // console.log(Item)
      // const Item = Screen.value.choises.find((item: { name: string; }) => item.name === s.name);
      if (Item) {
        Item.isSelect = false;
      }
      s.isSelect = false
      return
    }
    s.isSelect = true
    formatArr.value.push(s);
  }
}

const reset = ()=>{
  Screen.value.forEach(item=>{
    item.choises.forEach((i:any)=>{
      i.isSelect = false
      selectArr.value = []
      formatArr.value = []
    })
  })
}

const showScreen = () => {
  ScreenHandler.value = !ScreenHandler.value
}

//获取筛选数据
let Screen = ref<[]>([])

let ScreenHandler = ref(false)
const getProductionScreen = async () => {
  try {
    const result = await homeApi.getProductionScreen()
    Screen.value = cloneDeep(result)
    console.log(result)
    // console.log(Screen.value)
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  getProductionScreen()
})

</script>

<style scoped lang="scss">
.rank-list {
  display: flex;
  align-items: center;
  margin-top: -15px;

  .rank-left {
    width: 1117px;
    display: flex;
    padding: 25px 30px;
    font-size: 14px;
    color: #7d8090;

    .rank-item {
      margin-left: 60px;

      &:nth-of-type(1) {
        margin-left: 0px;
      }
    }

    .active {
      color: #f93684;
    }

  }
}

.screen {
  // width: 1200px;
  padding: 26px 30px;
  font-size: 14px;
  position: relative;

  .skill {
    display: flex;
    flex-wrap: wrap;

    .title {
      color: #b1b5c1;
      padding: 7px 0;
      margin-right: 35px;
    }

    .skill-content {
      display: flex;
      width: 1045px;
      flex-wrap: wrap;

      .skill-item {
        // width: 100px;
        display: inline-block;
        color: #7d8090;
        padding: 7px 13px;
        margin-right: 24px;
        margin-bottom: 10px;
      }

      .skill-item.select {
        background-color: #f93684;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
}

.reset{
  color: #f93684;
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 34px;
}
</style>
